<template>
  <a-layout
    :class="['layout', device]"
    style="flex-direction: column">

    <div class="layout-part-1">
      <div class="left">管理平台</div>
      <user-menu></user-menu>
    </div>
    <div
      class="layout-part-2">
      <a-drawer
        v-if="isMobile()"
        placement="left"
        :wrapClassName="`drawer-sider ${navTheme}`"
        :closable="false"
        :visible="collapsed"
        @close="drawerClose">
        <side-menu
          mode="inline"
          :menus="menus"
          :theme="navTheme"
          :collapsed="false"
          :collapsible="true"
          @menuSelect="menuSelect"></side-menu>
      </a-drawer>

      <side-menu
        v-else-if="isSideMenu()"
        mode="inline"
        :menus="menus"
        :theme="navTheme"
        :collapsed="collapsed"
        :collapsible="true"></side-menu>
      <a-layout
        :class="[layoutMode, `content-width-${contentWidth}`]"
        :style="{ paddingLeft: contentPaddingLeft,width:contentWidth }">
        <a-layout-content>
          <transition name="page-transition">
            <route-view style="height:100%"/>
          </transition>
        </a-layout-content>
      </a-layout>

    </div>

  </a-layout>

</template>

<script>
import { triggerWindowResizeEvent } from '@/utils/util'
import { mapState, mapActions } from 'vuex'
import { mixin, mixinDevice } from '@/utils/mixin'
import config from '@/config/defaultSettings'

import RouteView from './RouteView'
import SideMenu from '@/components/Menu/SideMenu'
import GlobalHeader from '@/components/GlobalHeader'
import GlobalFooter from '@/components/GlobalFooter'
import SettingDrawer from '@/components/SettingDrawer'
import { updateTheme } from '@/components/SettingDrawer/settingConfig'
import { convertRoutes } from '@/utils/routeConvert'
import UserMenu from '@/components/tools/UserMenu'

export default {
  name: 'BasicLayout',
  mixins: [mixin, mixinDevice],
  components: {
    UserMenu,
    RouteView,
    SideMenu,
    GlobalHeader,
    GlobalFooter,
    SettingDrawer
  },
  data() {
    return {
      production: config.production,
      collapsed: false,
      menus: [],
      height:'',
      env: process.env.VUE_APP_PROJECT_ENV  // test | production
    }
  },
  computed: {
    ...mapState({
      // 动态主路由
      // mainMenu: state => state.permission.addRouters
      mainMenu: state => state.permission.routers
      
    }),
    contentPaddingLeft() {
      if (!this.fixSidebar || this.isMobile()) {
        return '0'
      }
      if (this.sidebarOpened) {
        return '215px'
      }
      return '80px'
    },
    contentWidth(){
      if(this.sidebarOpened){
        return `calc(100vw - 215px)`
      }
      else{
        return `calc(100vw - 80px)`
      }
    },
  },
  watch: {
    sidebarOpened(val) {
      this.collapsed = !val
    }
  },
  created() {
    const routes = convertRoutes(this.mainMenu.find(item => item.path === '/'))
    console.log(routes,'routes')
    // this.menus = (routes && routes.children) || []
    this.menus =  this.mainMenu
   
    this.collapsed = !this.sidebarOpened
  },
  mounted() {
    updateTheme(this.primaryColor)
    const userAgent = navigator.userAgent
    if (userAgent.indexOf('Edge') > -1) {
      this.$nextTick(() => {
        this.collapsed = !this.collapsed
        setTimeout(() => {
          this.collapsed = !this.collapsed
        }, 16)
      })
    }
    window.vBus.$on('toggle', this.toggle)
  },
  methods: {
    ...mapActions(['setSidebar']),
    toggle() {
      this.collapsed = !this.collapsed
      this.setSidebar(!this.collapsed)
      triggerWindowResizeEvent()
    },
    paddingCalc() {
      let left = ''
      if (this.sidebarOpened) {
        left = this.isDesktop() ? '215px' : '80px'
      } else {
        left = (this.isMobile() && '0') || ((this.fixSidebar && '80px') || '0')
      }
      return left
    },
    menuSelect() {
      // if (!this.isDesktop()) {
      //   this.collapsed = false
      // }
    },
    drawerClose() {
      this.collapsed = false
    }
  }
}
</script>

<style lang="less">
.layout-part-1 {
  background: rgb(2, 15, 82);
  width: 100%;
  height: 60px;
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 0 20px;
  .left {
    display: flex;
    align-items: center;
    img {
      width: 38px;
      height: 38px;
      margin-right: 18px;
    }
    font-size: 26px;
    font-weight: bolder;
    color: #ffffff;
  }
}
.layout-part-2 {
  width: 100%;
  height: calc(100vh - 60px);
  display: flex;
}
/*
 * The following styles are auto-applied to elements with
 * transition="page-transition" when their visibility is toggled
 * by Vue.js.
 *
 * You can easily play with the page transition by editing
 * these styles.
 */

.page-transition-enter {
  opacity: 0;
}

.page-transition-leave-active {
  opacity: 0;
}

.page-transition-enter .page-transition-container,
.page-transition-leave-active .page-transition-container {
  -webkit-transform: scale(1.1);
  transform: scale(1.1);
}
</style>
